<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 配置Tailwind自定义颜色和字体 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#722ED1',
            dark: '#1D2129',
            light: '#F2F3F5'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
      }
      .input-focus {
        @apply border-primary ring-2 ring-primary/20;
      }
      .btn-hover {
        @apply transform hover:scale-105 transition-all duration-300;
      }
      .animate-fadeIn {
        animation: fadeIn 0.5s ease-in-out;
      }
      @keyframes fadeIn {
        0% { opacity: 0; transform: translateY(10px); }
        100% { opacity: 1; transform: translateY(0); }
      }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-light to-gray-200 min-h-screen flex items-center justify-center font-inter">
<!-- 背景装饰元素 -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
  <div class="absolute -top-20 -right-20 w-80 h-80 bg-primary/5 rounded-full blur-3xl"></div>
  <div class="absolute -bottom-20 -left-20 w-80 h-80 bg-secondary/5 rounded-full blur-3xl"></div>
</div>

<!-- 注册卡片 -->
<div class="relative z-10 w-full max-w-md mx-4">
  <div class="bg-white rounded-2xl p-8 card-shadow transform transition-all duration-500 hover:shadow-xl">
    <!-- 标题和图标 -->
    <div class="text-center mb-8">
      <div class="w-16 h-16 bg-primary rounded-xl flex items-center justify-center mx-auto mb-4">
        <i class="fa fa-user-plus text-white text-3xl"></i>
      </div>
      <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">用户注册</h1>
      <p class="text-gray-500 mt-2">创建一个新账户</p>
    </div>

    <!-- 注册表单 -->
    <form id="registerForm" class="space-y-5">
      <!-- 用户名输入框 -->
      <div class="relative">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <i class="fa fa-user text-gray-400"></i>
        </div>
        <input type="text" id="username" name="username" required
               class="block w-full pl-10 pr-3 py-3 rounded-lg border border-gray-300 focus:outline-none focus:input-focus transition-all duration-300"
               placeholder="用户名">
      </div>

      <!-- 密码输入框 -->
      <div class="relative">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <i class="fa fa-lock text-gray-400"></i>
        </div>
        <input type="password" id="password" name="password" required
               class="block w-full pl-10 pr-3 py-3 rounded-lg border border-gray-300 focus:outline-none focus:input-focus transition-all duration-300"
               placeholder="密码">
      </div>

      <!-- 邮箱输入框 -->
      <div class="relative">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <i class="fa fa-envelope text-gray-400"></i>
        </div>
        <input type="email" id="email" name="email" required
               class="block w-full pl-10 pr-3 py-3 rounded-lg border border-gray-300 focus:outline-none focus:input-focus transition-all duration-300"
               placeholder="邮箱">
      </div>

      <!-- 注册按钮 -->
      <button type="button" onclick="register()" class="w-full bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-4 rounded-lg shadow-lg shadow-primary/20 btn-hover">
        <i class="fa fa-check-circle mr-2"></i> 注册
      </button>
    </form>

    <!-- 错误消息 -->
    <div class="mt-6">
      <p th:if="${error}" th:text="${error}" class="text-red-500 text-center animate-fadeIn">
        注册失败，请检查您的信息
      </p>
    </div>

    <!-- 已有账号链接 -->
    <div class="mt-6 text-center">
      <p class="text-gray-600">
        已有账号? <a href="/login" class="text-primary hover:text-primary/80 font-medium transition-colors duration-300">登录</a>
      </p>
    </div>
  </div>

  <!-- 页脚 -->
  <div class="mt-6 text-center text-gray-500 text-sm">
    <p>© 2025 GameStore. 保留所有权利</p>
  </div>
</div>

<!-- 注册逻辑 -->
<script>
  function register() {
    // 获取表单数据
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const email = document.getElementById('email').value;

    // 简单验证
    if (!username || !password || !email) {
      showError('请填写所有必填字段');
      return;
    }

    // 构建 JSON 对象
    const user = {
      username: username,
      password: password,
      email: email
    };

    // 显示加载状态
    const submitButton = document.querySelector('button[type="button"]');
    submitButton.disabled = true;
    submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 处理中...';

    // 发送 POST 请求
    fetch('/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(user)
    })
            .then(response => {
              // 恢复按钮状态
              submitButton.disabled = false;
              submitButton.innerHTML = '<i class="fa fa-check-circle mr-2"></i> 注册';

              if (response.ok) {
                return response.json();
              } else {
                throw new Error('注册失败');
              }
            })
            .then(data => {
              if (data.success) {
                // 注册成功，显示成功消息并跳转
                showSuccess(data.message);
                setTimeout(() => {
                  window.location.href = '/login.html';
                }, 2000);
              } else {
                // 注册失败，显示错误消息
                showError(data.message);
              }
            })
            .catch(error => {
              // 恢复按钮状态
              submitButton.disabled = false;
              submitButton.innerHTML = '<i class="fa fa-check-circle mr-2"></i> 注册';

              // 显示错误消息
              showError('注册失败：' + error.message);
            });
  }

  // 显示错误消息
  function showError(message) {
    const errorElement = document.createElement('p');
    errorElement.className = 'text-red-500 text-center animate-fadeIn mt-4';
    errorElement.textContent = message;

    const form = document.getElementById('registerForm');
    const existingError = form.nextElementSibling;

    if (existingError && existingError.classList.contains('text-red-500')) {
      form.parentNode.replaceChild(errorElement, existingError);
    } else {
      form.parentNode.insertBefore(errorElement, form.nextSibling);
    }
  }

  // 显示成功消息
  function showSuccess(message) {
    const successElement = document.createElement('p');
    successElement.className = 'text-green-500 text-center animate-fadeIn mt-4';
    successElement.textContent = message;

    const form = document.getElementById('registerForm');
    const existingError = form.nextElementSibling;

    if (existingError && existingError.classList.contains('text-red-500')) {
      form.parentNode.replaceChild(successElement, existingError);
    } else {
      form.parentNode.insertBefore(successElement, form.nextSibling);
    }
  }

  // 页面加载动画
  document.addEventListener('DOMContentLoaded', function() {
    const registerCard = document.querySelector('.max-w-md');
    registerCard.classList.add('opacity-0', 'translate-y-8');

    setTimeout(() => {
      registerCard.classList.remove('opacity-0', 'translate-y-8');
      registerCard.classList.add('opacity-100', 'translate-y-0');
    }, 100);
  });
</script>
</body>
</html>
